Angular Material এর <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে আপনি সহজেই সুন্দর এবং কার্যকরী ট্যাব তৈরি করতে পারেন। ট্যাবস একটি জনপ্রিয় UI উপাদান, যা আপনার অ্যাপ্লিকেশনের ভিউ বা কনটেন্টকে বিভিন্ন বিভাগে ভাগ করতে সাহায্য করে। Angular Material-এর ট্যাব কম্পোনেন্ট Material Design এর গাইডলাইন অনুসরণ করে এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে।

Angular Material ট্যাবস কনফিগার করা

১. মডিউল ইমপোর্ট করা

প্রথমে MatTabsModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [MatTabsModule],
})
export class AppModule { }

২. HTML টেমপ্লেটে ট্যাব ব্যবহার

Angular Material এ ট্যাব তৈরি করতে <mat-tab-group> এবং <mat-tab> ব্যবহার করা হয়। এখানে, <mat-tab-group> হল মূল কন্টেইনার এবং <mat-tab> ট্যাবের প্রতিটি ভিউ বা কনটেন্ট।

<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

এখানে:

• <mat-tab-group> ট্যাবগুলোকে একটি গ্রুপে যুক্ত করবে।
• <mat-tab label="Tab 1"> প্রতিটি ট্যাবের লেবেল এবং কনটেন্ট থাকবে।

৩. কন্টেন্টের জন্য Dynamic Binding

আপনি চাইলে ট্যাবের কন্টেন্ট ডাইনামিকভাবে নিয়ন্ত্রণ করতে পারেন। Angular এর ngFor ডিরেকটিভ ব্যবহার করে আপনি ট্যাবের কন্টেন্টকে সহজে ডাইনামিকভাবে তৈরি করতে পারেন।

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label">{{ tab.content }}</mat-tab>
</mat-tab-group>

TypeScript ফাইলে:

export class AppComponent {
  tabs = [
    { label: 'Tab 1', content: 'Content for Tab 1' },
    { label: 'Tab 2', content: 'Content for Tab 2' },
    { label: 'Tab 3', content: 'Content for Tab 3' }
  ];
}

এখানে, tabs অ্যারে থেকে ngFor দিয়ে প্রতিটি ট্যাব ডাইনামিকভাবে তৈরি করা হচ্ছে।

৪. ট্যাব সিলেকশন (Tab Selection)

আপনি selectedIndex এর মাধ্যমে ট্যাবের সিলেকশন মান নিয়ন্ত্রণ করতে পারেন।

<mat-tab-group [(selectedIndex)]="selectedIndex">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

<p>Selected Tab Index: {{ selectedIndex }}</p>

TypeScript ফাইলে:

export class AppComponent {
  selectedIndex: number = 0; // ডিফল্টভাবে প্রথম ট্যাব সিলেক্ট করা
}

এখানে, selectedIndex দিয়ে আপনি কোন ট্যাব সিলেক্ট আছে তা ট্র্যাক করতে পারবেন এবং পরিবর্তন করতে পারবেন।

৫. ট্যাব ইন্ডিকেটর কাস্টমাইজ করা

Angular Material আপনাকে ট্যাব ইন্ডিকেটর কাস্টমাইজ করার জন্য বিভিন্ন অপশন সরবরাহ করে। আপনি ট্যাব ইন্ডিকেটরের রঙ বা স্টাইল কাস্টমাইজ করতে পারেন।

.mat-tab-label {
  color: blue; /* ট্যাব লেবেলের রঙ পরিবর্তন */
}

.mat-tab-label-active {
  color: red; /* সিলেক্টেড ট্যাবের লেবেলের রঙ পরিবর্তন */
}

এটি ট্যাবের লেবেলগুলির স্টাইল পরিবর্তন করবে।

৬. ট্যাব ইমেজ সহ ব্যবহার

Angular Material ট্যাবে আপনি ছবি বা অন্যান্য উপাদানও যোগ করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি ট্যাবে ইমেজ যুক্ত করা হয়েছে:

<mat-tab-group>
  <mat-tab label="Tab 1">
    <img src="https://via.placeholder.com/150" alt="Tab 1 Image">
    Content 1
  </mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

এখানে, <img> ট্যাব কন্টেন্টের মধ্যে একটি চিত্র যুক্ত করা হয়েছে।

৭. ট্যাব ভিউ নিয়ন্ত্রণ (Tab View Control)

কখনও কখনও, আপনি ট্যাবের দৃশ্য বা ভিউ নিয়ন্ত্রণ করতে চান (যেমন, শুধুমাত্র কিছু ট্যাব দৃশ্যমান থাকবে)। এটি ngIf বা [hidden] ডিরেকটিভের মাধ্যমে করা যেতে পারে।

<mat-tab-group>
  <mat-tab *ngIf="showTab1" label="Tab 1">Content 1</mat-tab>
  <mat-tab *ngIf="showTab2" label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

TypeScript ফাইলে:

export class AppComponent {
  showTab1 = true;
  showTab2 = false;
}

এখানে, আপনি showTab1 এবং showTab2 এর মান পরিবর্তন করে ট্যাবগুলো প্রদর্শন বা লুকাতে পারবেন।

Angular Material ট্যাব কম্পোনেন্ট অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য একটি শক্তিশালী এবং কাস্টমাইজযোগ্য UI উপাদান। এটি সহজেই বিভিন্ন ট্যাব তৈরি করতে সহায়তা করে এবং ব্যবহারকারীদের মধ্যে কনটেন্ট ভাগ করতে ব্যবহৃত হয়। ট্যাবস ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন এবং কনটেন্ট সুশৃঙ্খলভাবে উপস্থাপন করতে পারেন। Angular Material এর ট্যাব কম্পোনেন্টের মাধ্যমে আপনি ডাইনামিক ট্যাব তৈরি, ট্যাব সিলেকশন নিয়ন্ত্রণ, কাস্টম স্টাইলিং এবং ইন্টারঅ্যাকটিভ UI তৈরি করতে পারেন।

Angular Material-এর <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই ট্যাবড ন্যাভিগেশন তৈরি করতে পারেন। এটি অ্যাঙ্গুলার অ্যাপ্লিকেশনের জন্য একটি সুন্দর, আধুনিক, এবং ব্যবহারকারী-বান্ধব নেভিগেশন তৈরি করার একটি জনপ্রিয় উপায়।

ট্যাবড ন্যাভিগেশন ব্যবহারকারীদের একাধিক ভিউ বা কনটেন্টের মধ্যে সুইচ করার সুযোগ দেয়, যা অ্যাপ্লিকেশনটির অভ্যন্তরীণ নেভিগেশনকে আরও সহজ ও কার্যকরী করে তোলে।

ট্যাবড ন্যাভিগেশন তৈরি করার ধাপ

১. মডিউল ইমপোর্ট করা

প্রথমে, Angular Material-এর MatTabsModule ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করতে হবে।

import { MatTabsModule } from '@angular/material/tabs';

@NgModule({
  imports: [
    MatTabsModule
  ]
})
export class AppModule { }

২. HTML টেমপ্লেটে ট্যাব তৈরি করা

এখন <mat-tab-group> এবং <mat-tab> কম্পোনেন্ট ব্যবহার করে ট্যাবগুলো তৈরি করা যাবে। এখানে প্রতিটি <mat-tab> একটি ট্যাব, এবং <mat-tab-group> কম্পোনেন্টটি তাদেরকে গ্রুপ করে রাখে।

<mat-tab-group>
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

এখানে, label অ্যাট্রিবিউটটি ট্যাবের ট্যাগ নাম (যেমন, "Tab 1", "Tab 2") নির্ধারণ করে এবং প্রতিটি ট্যাবের কন্টেন্টের মধ্যে যেকোনো HTML কন্টেন্ট রাখতে পারেন।

৩. টাইপস্ক্রিপ্টে ট্যাব সিলেকশন ট্র্যাক করা

আপনি চাইলে selectedIndex প্রপার্টি ব্যবহার করে সিলেক্ট করা ট্যাব ট্র্যাক করতে পারেন। যেমন, আপনি যদি চান যে ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট হয়ে থাকুক, তাহলে selectedIndex ব্যবহার করতে হবে।

<mat-tab-group [selectedIndex]="selectedTabIndex">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  selectedTabIndex: number = 1;  // ডিফল্টভাবে দ্বিতীয় ট্যাব সিলেক্ট
}

এখানে, selectedTabIndex এর মান পরিবর্তন করে আপনি যেকোনো ট্যাবকে ডিফল্টভাবে সিলেক্ট করতে পারেন।

৪. ট্যাবের মধ্যে ডাইনামিক কন্টেন্ট

আপনি যেকোনো ট্যাবের কন্টেন্টের মধ্যে ডাইনামিক কন্টেন্ট রাখতে পারেন, যেমন ফর্ম, লিস্ট, অথবা অন্যান্য কম্পোনেন্ট।

<mat-tab-group>
  <mat-tab label="User Info">
    <app-user-info></app-user-info>
  </mat-tab>
  <mat-tab label="Settings">
    <app-settings></app-settings>
  </mat-tab>
  <mat-tab label="History">
    <app-history></app-history>
  </mat-tab>
</mat-tab-group>

এখানে, app-user-info, app-settings, এবং app-history নামক কাস্টম কম্পোনেন্টগুলো ট্যাব কন্টেন্ট হিসেবে ব্যবহার করা হয়েছে।

৫. ট্যাব সিলেকশনের উপর অ্যাকশন গ্রহণ করা

আপনি ট্যাব সিলেকশন পরিবর্তন করার সময় কোনো অ্যাকশন ট্রিগার করতে চাইলে selectedTabChange ইভেন্ট ব্যবহার করতে পারেন।

<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="Tab 1">Content 1</mat-tab>
  <mat-tab label="Tab 2">Content 2</mat-tab>
  <mat-tab label="Tab 3">Content 3</mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  onTabChange(event: any) {
    console.log('Tab changed to index: ', event.index);
  }
}

এখানে, selectedTabChange ইভেন্টের মাধ্যমে আপনি সিলেক্ট করা ট্যাবের ইনডেক্স ট্র্যাক করতে পারবেন এবং এর উপর ভিত্তি করে কোনো কার্যক্রম গ্রহণ করতে পারবেন।

ট্যাবড ন্যাভিগেশন কাস্টমাইজেশন

১. ট্যাব স্টাইল কাস্টমাইজ করা

আপনি ট্যাবের স্টাইল কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, ট্যাবের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করা:

mat-tab-group {
  background-color: #f0f0f0;
}

mat-tab {
  color: #3f51b5;
}

mat-tab-label {
  font-weight: bold;
}

২. ডাইনামিক ট্যাব তৈরি করা

আপনি যদি ট্যাবগুলোর সংখ্যা ডাইনামিকভাবে পরিবর্তন করতে চান, তাহলে ট্যাবগুলো একটি লিস্টের মাধ্যমে রেন্ডার করতে পারেন। এখানে একটি উদাহরণ:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label">
    {{ tab.content }}
  </mat-tab>
</mat-tab-group>

টাইপস্ক্রিপ্ট:

export class AppComponent {
  tabs = [
    { label: 'Tab 1', content: 'Content for Tab 1' },
    { label: 'Tab 2', content: 'Content for Tab 2' },
    { label: 'Tab 3', content: 'Content for Tab 3' }
  ];
}

এখানে, *ngFor ডিরেকটিভ ব্যবহার করে একটি লিস্টের মাধ্যমে ট্যাবগুলো ডাইনামিকভাবে রেন্ডার করা হয়েছে।

Angular Material এর ট্যাবড ন্যাভিগেশন একটি অত্যন্ত কার্যকরী উপায় যা অ্যাপ্লিকেশনের মধ্যে একাধিক পৃষ্ঠা বা ভিউ সুইচ করতে সহায়তা করে। এটি ব্যবহারকারীকে একটি সুষ্ঠু ও ইন্টারেক্টিভ নেভিগেশন অভিজ্ঞতা প্রদান করে। MatTabGroup এবং MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাবড নেভিগেশন তৈরি করতে পারেন এবং বিভিন্ন কাস্টমাইজেশন যেমন স্টাইলিং, ডাইনামিক কন্টেন্ট, ট্যাব সিলেকশন ট্র্যাকিং ইত্যাদি করতে পারেন।

Angular Material এর MatTab কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ট্যাব তৈরি করতে পারেন। ডাইনামিক ট্যাব তৈরি করতে Angular-এর ngFor ডিরেকটিভ ব্যবহার করতে হয়, যা আপনাকে একাধিক ট্যাবকে প্রোগ্রামেটিক্যালি তৈরি করতে সক্ষম করে। এটি সাধারণত তখন ব্যবহৃত হয় যখন ট্যাবগুলো ডাটাবেস বা API থেকে লোড হয় এবং ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে ট্যাব কন্টেন্ট পরিবর্তিত হয়।

ডাইনামিক ট্যাব তৈরি করার জন্য পদক্ষেপ

১. অ্যাঙ্গুলার ম্যাটেরিয়াল ইন্সটল করা

প্রথমে Angular Material ইন্সটল করুন (যদি আগে থেকে ইন্সটল না থাকে):

ng add @angular/material

এখানে, MatTabsModule এবং MatIconModule ইমপোর্ট করা হবে ট্যাবস এবং আইকন ব্যবহার করতে।

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

MatTabsModule এবং MatIconModule ইমপোর্ট করুন:

import { MatTabsModule } from '@angular/material/tabs';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatTabsModule,
    MatIconModule
  ]
})
export class AppModule {}

৩. ডাইনামিক ট্যাব তৈরি করার HTML

এখন, ngFor ডিরেকটিভ ব্যবহার করে ডাইনামিক ট্যাব তৈরি করা যায়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে ট্যাবগুলো একটি অ্যারে থেকে ডাইনামিকভাবে লোড হচ্ছে:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label" [icon]="tab.icon">
    <ng-template mat-tab-label>
      <mat-icon>{{ tab.icon }}</mat-icon>
      {{ tab.label }}
    </ng-template>
    <div *ngIf="tab.content">
      <p>{{ tab.content }}</p>
    </div>
  </mat-tab>
</mat-tab-group>

এখানে, আমরা tabs নামক একটি অ্যারে ব্যবহার করছি যেখানে প্রতিটি ট্যাবের জন্য label, icon, এবং content ডাইনামিকভাবে লোড হচ্ছে।

৪. টাইপস্ক্রিপ্ট ফাইলে ডেটা যুক্ত করা

আপনার app.component.ts ফাইলে tabs অ্যারে তৈরি করুন। এখানে প্রতিটি ট্যাবের জন্য একটি অবজেক্ট রয়েছে যা label, icon, এবং content ধারণ করে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabs = [
    { label: 'Home', icon: 'home', content: 'This is the home tab' },
    { label: 'Profile', icon: 'person', content: 'This is the profile tab' },
    { label: 'Settings', icon: 'settings', content: 'This is the settings tab' }
  ];
}

এখানে, tabs অ্যারে তিনটি ট্যাবের তথ্য ধারণ করছে। প্রতিটি ট্যাবে একটি লেবেল, একটি আইকন, এবং কন্টেন্ট আছে।

৫. ডাইনামিক কন্টেন্ট প্রদর্শন করা

আপনি চাইলে ট্যাবের কন্টেন্টও ডাইনামিকভাবে পরিবর্তন করতে পারেন। যেমন, আপনি API থেকে কন্টেন্ট লোড করতে পারেন:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  tabs = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // API থেকে ট্যাব ডেটা লোড করা
    this.http.get<any[]>('https://api.example.com/tabs').subscribe(data => {
      this.tabs = data;
    });
  }
}

এখানে, ngOnInit() লাইফসাইকেল হুক ব্যবহার করে API থেকে ট্যাব ডেটা লোড করা হচ্ছে এবং tabs অ্যারে আপডেট হচ্ছে।

ডাইনামিক ট্যাবের সুবিধা

1. ফ্লেক্সিবল ডিজাইন: ডাইনামিক ট্যাবগুলোর মাধ্যমে আপনি একাধিক কন্টেন্ট বা তথ্য এক জায়গায় উপস্থাপন করতে পারেন। এতে ব্যবহারকারীদের জন্য অ্যাপ্লিকেশন আরো ইন্টারঅ্যাকটিভ এবং সহজ হয়।
2. ডেটা থেকে ট্যাব লোড: আপনি যেকোনো ডেটা উৎস (API, ডাটাবেস ইত্যাদি) থেকে ট্যাব কন্টেন্ট ডাইনামিকভাবে লোড করতে পারেন, যা অ্যাপ্লিকেশনকে আরো স্কেলেবল এবং রিয়েল-টাইম করে তোলে।
3. UI/UX উন্নতি: ট্যাব ব্যবহারকারীদের জন্য একটি পরিষ্কার এবং সহজে নেভিগেটেবল ইন্টারফেস প্রদান করে।

Angular Material এর MatTab কম্পোনেন্টের সাহায্যে আপনি সহজেই ডাইনামিক ট্যাব তৈরি করতে পারেন। এটি ngFor ডিরেকটিভের মাধ্যমে ডেটা থেকে ট্যাব লোড করতে সক্ষম করে এবং এর মাধ্যমে আপনি অ্যাপ্লিকেশনের UI আরো ইন্টারঅ্যাকটিভ ও ব্যবহারকারী-বান্ধব করতে পারেন। আপনি যখন ট্যাব কন্টেন্ট API বা ডাটাবেস থেকে ডাইনামিকভাবে লোড করেন, তখন এটি অ্যাপ্লিকেশনকে আরো দক্ষ এবং আধুনিক করে তোলে।